<script setup lang="ts">
import { ref, reactive } from 'vue'
import Visitor from '@/components/Visitor.vue'
import { type patientInfo } from '@/api/type.ts'
import { reqAllUser } from '@/api/user.ts'
import { reqDoctorInfo, reqSubmitOrder } from '@/api/hospitalsInfo'
import { useRouter } from 'vue-router'
const router = useRouter()

const patientList = ref<patientInfo[]>([]);
// const patientList = ref([]);
const getAllPatient = async () => {
    const res = await reqAllUser()
    patientList.value = res.data
    // console.log(patientList.value)
}
getAllPatient()

//存储医生的信息
// let docInfo = ref<any>({});
const getDoctorInfo = async () => {
    const res = await reqDoctorInfo(router.currentRoute.value.query.docId as string)
    // if (res.code == 200) {
    //     docInfo.value = res.data;
    // }
}
getDoctorInfo()

const chosePatientId = ref<number>(0)

const submit = async () => {
    //医院编号
    //   let hoscode = docInfo.value.hoscode;
    let hoscode = '54321';
    //暂无医生数据，所以暂时无法完成预约并跳转，这里先模拟假数据
    //医生的ID
    //   let scheduleId = docInfo.value.id
    await reqSubmitOrder(hoscode as string, router.currentRoute.value.query.docId as string, chosePatientId.value)
}

</script>

<template>
    <h2>确认挂号信息</h2>
    <div class="patients-manage">
        <h3>请选择就诊人
            <el-button type="primary"
                @click="$router.push({ path: '/user/patient', query: { type: 'add' } })">添加就诊人</el-button>
        </h3>
        <div class="patientList-box">

            <Visitor v-for="(item) in patientList" :key="item.id" :onePatient="item" @click="chosePatientId = item.id">
                <div class="chose" :class="{ activeChose: chosePatientId == item.id }">已选择</div>
            </Visitor>
        </div>
    </div>
    <br>
    <div class="patients-manage">
        <h3>挂号信息</h3>
        <div>
            <el-descriptions title="  " :column="2" border label-width="150px">
                <el-descriptions-item label="就诊日期：">{{ }}</el-descriptions-item>
                <el-descriptions-item label="就诊医院：">{{ }}</el-descriptions-item>
                <el-descriptions-item label="就诊科室：">{{ }}</el-descriptions-item>
                <el-descriptions-item label="医生姓名：">{{ }}</el-descriptions-item>
                <el-descriptions-item label="医生职称：">{{ }}</el-descriptions-item>
                <el-descriptions-item label="医生专长：">{{ }}</el-descriptions-item>
                <el-descriptions-item label="医生服务器：">{{ }}</el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
    <el-button type="primary" @click="submit" style="margin-top: 20px;">确认挂号</el-button>

</template>

<style scoped lang="scss">
h2 {
    margin: 20px;
    font-size: 1.25rem;
    color: var(--text-color);
    font-weight: 600;
}

.chose {
    position: absolute;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border-radius: 50%;
    border: 2px dashed var(--theme-color);
    font-size: 1rem;
    color: var(--theme-color);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all 0.3s linear;
    opacity: 0;
}

.activeChose {
    opacity: 1;
    transform: rotate(30deg) scale(1.2);
}
</style>
